<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <span>1</span>
            <b>大米</b>
            <i>￥2</i>
            &nbsp;&nbsp;&nbsp;
            <span>10</span>
        </li>
    </ul>
    <script>
         var list = [
            { id: 1, title: '小米', price: 2, num: 10 },
            { id: 2, title: '大米', price: 3, num: 5 },
            { id: 3, title: '黑米', price: 4, num: 0 },
            { id: 4, title: '糯米', price: 5, num: 10 }
        ]
        function money (price, num) {
            return price*num
        }

        var ul = document.querySelector('ul')
        var str = ''
        list.forEach( function (shop) {
            // str +='<li>' +
            //         '<span>' + shop.id + '</span>' +
            //         '<b>' + shop.title + '</b>' +
            //         '<i>￥' + shop.price +'</i>' +
            //         '&nbsp;&nbsp;&nbsp' +
            //         '<span>' + shop.num + '</span>' +
            //         '</li>'
            str += `
                    <li>
                    <span>${shop.id}</span>
                    <b>${shop.title}</b>
                    <i>${shop.price}</i>
                    &nbsp;$nbsp;$nbsp
                    <span>${shop.num}</span>
                    <span>${shop.num === 0 ? '售罄' : '有货'}</span>
                    <span>${money(shop.price, shop.num)}</span>
                    </li>
            `

        
         })
        // ul.innerHTML = str
        ul.innerHTML = str
    </script>
</body>
</html>